<template>
	<el-dialog :title="titleMap[mode]" width="80%" v-model="visible" destroy-on-close @closed="$emit('closed')" :close-on-click-modal="false">
		<el-container>
			<el-header>
				<div class="left-panel">
					<el-button type="primary" icon="el-icon-plus" @click="add"></el-button>
				</div>
			</el-header>
			<el-main class="nopadding">
				<scTable ref="table" :apiObj="apiObj" stripe remoteSort remoteFilter height="500" :params="query">
					<el-table-column type="index" width="50"></el-table-column>
					<el-table-column label="开户行名称" prop="bank_name" align="center"></el-table-column>
					<el-table-column label="户主姓名" prop="bank_head" align="center"></el-table-column>
					<el-table-column label="银行账户" prop="bank_account" align="center"></el-table-column>
					<el-table-column label="是否默认" prop="is_default" align="center">
                        <template #default="scope">
							<el-switch v-model="scope.row.is_default" @change="changeDefault($event, scope.row)" :loading="scope.row.$switch_status" :active-value="1" :inactive-value="0"></el-switch>
						</template>
                    </el-table-column>
					<el-table-column label="是否禁用" prop="system_disable" align="center">
                        <template #default="scope">
							<el-switch v-model="scope.row.system_disable" @change="changeStatus($event, scope.row)" :loading="scope.row.$switch_status" :active-value="1" :inactive-value="0"></el-switch>
						</template>
                    </el-table-column>
					<el-table-column label="时间" prop="create_time" align="center"></el-table-column>
					<el-table-column label="操作" fixed="right" align="center" width="160">
						<template #default="scope">
							<el-button-group>
								<el-button text type="primary" size="small" @click="table_edit(scope.row, scope.$index)">编辑</el-button>
								<el-popconfirm title="确定删除吗？" @confirm="table_del(scope.row, scope.$index)">
									<template #reference>
										<el-button text type="primary" size="small">删除</el-button>
									</template>
								</el-popconfirm>
							</el-button-group>
						</template>
					</el-table-column>
				</scTable>
			</el-main>
		</el-container>
	</el-dialog>
    <add-bank v-if="dialog.save" ref="saveDialog" @success="handleSuccess" @closed="dialog.save = false"></add-bank>
</template>
<script>
import addBank from './addBank';
export default {
  components: { addBank },
	emits: ['success', 'closed'],
    props: {
        apply_id: { type: String, default:""},
    },
	data() {
		return {
			mode: "add",
			titleMap: {
				add: '供应商银行',
			},
			visible: false,
			isSaveing: false,
            id:'',
            dialog: {
				save: false
			},
            apiObj: this.$API.basic.bank.lists,
            query:{
                apply_id:this.apply_id
            }
		}
	},
	mounted() {
	},
	methods: {
		//显示
		open(mode = 'add') {
			this.mode = mode;
			this.visible = true;
			return this
		},
        // 添加
        add() {
			this.dialog.save = true
			this.$nextTick(() => {
				this.$refs.saveDialog.open('add').setData({apply_id:this.apply_id})
			})
		},
        //编辑
		table_edit(row) {
			this.dialog.save = true
			this.$nextTick(() => {
				this.$refs.saveDialog.open('edit').setData(row)
			})
		},
        //删除
		async table_del(row, index) {
			var reqData = { id: row.id };
			var res = await this.$API.basic.bank.delete.post(reqData);
			if (res.code == 1) {
				//这里选择刷新整个表格 OR 插入/编辑现有表格数据
				this.$refs.table.tableData.splice(index, 1);
				this.$message.success("删除成功");
			} else {
				this.$alert(res.message, "提示", { type: "error" });
			}
		},
        async changeDefault(val, row) {
            console.log('row :>> ', row);
			row.$switch_status = true;
			var res = await this.$API.basic.bank.update_default.post({
				id: row.id,
				// is_default: row.is_default,
			});
			if (res.code == 1) {
				row.$switch_status = false;
				this.$refs.table.refresh();
				this.$message.success("操作成功");
			} else {
				this.$alert(res.message, "提示", { type: "error" });
			}
		},
        async changeStatus(val, row) {
			row.$switch_status = true;
			var res = await this.$API.basic.bank.update_status.post({
				id: row.id,
				system_disable: row.system_disable,
			});
			if (res.code == 1) {
				row.$switch_status = false;
				this.$refs.table.refresh();
				this.$message.success("操作成功");
			} else {
				this.$alert(res.message, "提示", { type: "error" });
			}
		},
        // 数据更新
        handleSuccess(data, mode) {
			if (mode == "add") {
				this.$refs.table.refresh();
			} else if (mode == "edit") {
				this.$refs.table.refresh();
			}
		},
	}
}
</script>

<style></style>
